
<template>
  <div>
    <h1>这是主页</h1>
    <el-row>
      <el-col :span="10">
        <div id="main" style="width: 500px;height: 400px;"></div>
      </el-col>
      <el-col :span="10">
        <div id="pie" style="width: 500px;height: 400px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import request from "@/utils/request";

    export default {
      name:"Home",
      data(){
        return{

        }
      },
      mounted() {   //页面渲染之后再触发
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option = {
          title: {
            text: '各季度注册用户数量统计',
            subtext: '趋势图',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: ["第一季度","第二季度","第三季度","第四季度"]
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [],
              type: 'line'
            },
            {
              data: [],
              type: 'bar'
            }
          ]
        };

        var pieoption = {
          title: {
            text: '各季度注册用户数量统计',
            subtext: '比例图',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        var pieDom = document.getElementById('pie');
        var pieChart = echarts.init(pieDom);

        request.get("/echarts/members").then(res=>{
          // option.xAxis.data=res.data.x
          option.series[0].data=res.data
          option.series[1].data=res.data
          myChart.setOption(option);

          pieoption.series[0].data=[
            {name:"第一季度",value:res.data[0]},
            {name:"第二季度",value:res.data[1]},
            {name:"第三季度",value:res.data[2]},
            {name:"第四季度",value:res.data[3]},
          ]
          pieChart.setOption(pieoption);
        })
      }
    }
</script>

<style>

</style>